<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐播放器之computed实现</title>
</head>
<style>
    *{
        padding: 0px;
        margin: 0px;
    }
    ul{
        list-style: none;
    }
    ul li{
        margin: 20px 20px;
        padding: 10px 5px;
        border-radius: 3px;
    }
    ul li.active{
        background-color: #d2e2f3;
    }
</style>
<body>
    <div id="app">
        <audio  :src="getCurrentSorgSrc" controls autoplay @ended="handleEnded"></audio>
        <ul>
            <li :class='{active:index===currentIndex}' v-for='(item,index) in musicData' :key='item.id' @click="handleClick(index)">
                <h2>{{item.id}}--歌名：{{item.name}}</h2>
                <p>{{item.author}}</p>
            </li>
        </ul>
        <button @click='handleNext'>下一首</button>
    </div>
    <script src="vue.js"></script>
    <script>
        const musicData=[{
            id:1,
            name:'四块五',
            author:'隔壁老樊',
            songSrc:'./static/隔壁老樊 - 四块五.mp3'
        },
        {
            id:2,
            name:'童话镇',
            author:'许娜',
            songSrc:'./static/许娜 - 童话镇.mp3'
        },
        {
            id:3,
            name:'惊鸿一面',
            author:'许嵩',
            songSrc:'./static/许嵩 _ 黄龄 - 惊鸿一面.mp3'
        },
        {
            id:4,
            name:'纸短情长',
            author:'烟把儿乐队',
            songSrc:'./static/烟把儿乐队 - 纸短情长 (完整版).mp3'
        }]
        new Vue({
            el:'#app',
            data:{
                musicData,
                currentIndex:0
            },
            computed:{
                getCurrentSorgSrc(){
                    return this.musicData[this.currentIndex].songSrc
                }
            },
            methods:{
                handleClick(index){
                    this.currentIndex=index;
                },
                handleEnded(){
                    this.handleNext();
                },
                handleNext(){
                    this.currentIndex++;
                    if(this.currentIndex==this.musicData.length){
                        this.currentIndex=0;
                    }
                }
            }
        })
   </script>
</body>
</html>